<template>
  <header>
    <h1><van-icon name="new-arrival-o" size="36px" /></h1>
    <div class="search" @click="goSearch">
      <i><van-icon name="search" size="30px" /></i>
      <span>搜索你喜欢的....</span>
    </div>
    <div><van-icon name="service-o" size="30px" /></div>
  </header>
</template>

<script>
export default {
  methods: {
    goSearch() {
      this.$router.push("/search")
    },
  },
}
</script>

<style scoped>
header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 3.75rem /* 60/16 */;
  background-color: #b0352f;
}

header h1 {
  padding-right: 0 0.625rem /* 10/16 */;
  width: 4.375rem /* 70/16 */;
  height: 2.75rem /* 44/16 */;
}

.search {
  display: flex;
  align-items: center;
  width: 15.375rem /* 246/16 */;
  height: 1.875rem /* 30/16 */;
  background-color: #fff;
  border-radius: 0.75rem /* 12/16 */;
}

.search i {
  padding: 0 0.375rem /* 6/16 */;
  color: #ccc;
}

.search span {
  font-size: 0.875rem /* 14/16 */;
  color: #ccc;
}
</style>
